<template>
  <div class="manage" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="gzForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" class="input_large">
          <el-input placeholder="设备编码" v-model="queryForm.deviceCode"></el-input>
        </el-form-item>
        <el-form-item label="" class="search_select">
          <el-select multiple collapse-tags clearable v-model="queryForm.deptList" filterable placeholder="部门">
            <el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.id"> <span style="float: left">{{ item.deptName }}</span> <span style="float: left; color: #8492a6; font-size: 11px">{{ item.deptLevel }}级</span> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select multiple collapse-tags allow-create clearable v-model="queryForm.producerList" filterable placeholder="制作厂家">
            <el-option v-for="(item,index) in produceNameList" :key="index" :label="item|filterText" :value="item"> </el-option>
          </el-select>
        </el-form-item>
      <!--</el-form>
      <el-form :inline="true" class="demo-form-inline">-->
        <el-form-item label="" class="input_large" style="letter-spacing:13px">
          <el-input placeholder="设备名称" v-model="queryForm.name"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-col :span="12">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.startTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="margin-left: -25px;">至</el-col>
          <el-col :span="12">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.endTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search" @click="getDeviceList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="add_new" v-if="hasRole('device:device:add')" @click="addDevice" style="margin-top: 5px"> 
    	<span><i class="fa fa-plus" aria-hidden="true"></i> 新建设备</span> 
    </div>
    <!--<div style="display: inline;float: right;margin-top: -4%" class="add add_zl" v-if="hasRole('device:device:add')">
      <span @click="addDevice"
            style="cursor: pointer !important;background-color: #f2a221;border-radius: 5px;color: white;padding-top: 8px;padding-bottom: 6px;padding-left: 10px;padding-right: 17px;display: inline-block;font-size: 14px;">
        <i class="fa fa-plus" aria-hidden="true"></i>
        <label style="cursor: pointer;"> 新建设备</label>
      </span>
    </div>-->
    <wh-table :height="'600'" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-top: 10px">
      <template slot-scope="props" slot="operate">
        <div> 
        	<span class="caozuo_span">
          	<a v-if="props.rowData.deviceStatus != '2' && props.rowData.deviceStatus != '3' && hasRole('device:device:edit')"  @click="editDeviceDetail(props.rowData)">编辑</a>
        	</span> 
        	<span class="caozuo_span">
          	<a v-if="props.rowData.deviceStatus != '2' && props.rowData.deviceStatus != '3' && hasRole('device:device:dump')"   @click="bfDevice(props.rowData)">报废</a>
        	</span> 
        	<span class="caozuo_span">
          	<a v-if="hasRole('device:device:delete')" @click="deleteDeviceDetail(props.rowData)">删除</a>
        	</span> 
        	<span class="caozuo_span">
          	<a  @click="printGz(props.rowData)">打印</a>
        	</span> 
        </div>
      </template>
    </wh-table>
    <div style="margin-top: 20px;margin-right: calc(45%)">
      <el-upload v-show="batchImport" class=" fileselect" style="text-align: right" action="/autoMonitor/manage/insertBatchDevice" ref="fileUpload" :auto-upload="true">
        <el-button type="primary" class="buttonAdd">批量导入工装</el-button>
      </el-upload>
    </div>
    <bf-edit :rowData="rowData"></bf-edit>
    <edit-device :dataDetail="editData" :type="type"></edit-device>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import bfEdit from "./bfEdit";
  import editDevice from "./editDevice";
  export default {
    name: 'manage',
    data() {
      return {
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
        rowData: {},
        editData: {},
        type: "",
        deptList: [],
        queryForm: {
          deviceCode: "",
          name: "",
          producerList: [],
          deptList: [],
          startTime: "",
          endTime: ""
        },
        batchImport: false,
        produceNameList: []
      }
    },
    components: {
      whTable,
      bfEdit,
      editDevice
    },
    mounted() {
      let self = this;
      self.queryForm.deviceCode = "";
      self.queryForm.name = "";
      self.queryForm.startTime = "";
      self.queryForm.endTime = "";
      self.queryForm.producerList = [];
      self.queryForm.deptList = [];
      self.getDeviceList();
      self.getProduceName();
      self.getDeptList();
      self.batchImport = this.$route.query.batchImport;
      self.$eventBus.$on("updateDevice", function() {
        self.getDeviceList();
      })
    },
    filters: {
      filterText(val) {
        if(val && val.length > 8) {
          return val.substring(0, 7) + "..."
        }
        return val;
      }
    },
    methods: {
      getDeptList() {
        let self = this;
        self.$http({
          url: "/autoMonitor/dept/queryDeptList",
          method: "post",
          params: {
            convertChild: false
          }
        }).then(resp => {
          if(resp.success) {
            self.deptList = resp.result;
          }
        });
      },
      getProduceName() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryProducerName",
          method: "post",
        }).then(resp => {
          if(resp.success) {
            self.produceNameList = resp.result;
          }
        });
      },
      printGz(rowData) {
        let self = this;
        self.$http({
          url: "/autoMonitor/print",
          method: "post",
          params: {
            name: "名称:" + rowData.name,
            code: "编号:" + rowData.deviceCode
          }
        }).then(resp => {});
      },
      handleDefaultTab() {
        let self = this;
        self.tableHeader =  [{"columnName": "assetCode", "coloumNameCn": "资产编码"},
          {"columnName": "deviceCode", "coloumNameCn": "设备编码"},
          {"columnName": "name", "coloumNameCn": "设备名称"},
          {"columnName": "type", "coloumNameCn": "型号规格"},
          {"columnName": "deviceCount", "coloumNameCn": "数量"},
          {"columnName": "producer", "coloumNameCn": "制造商"},
          {"columnName": "price", "coloumNameCn": "价值"},
          {"columnName": "userDate", "coloumNameCn": "投用日期"},
          {"columnName": "deviceStatus", "coloumNameCn": "设备状态","tag":true},
          {"columnName": "wbStatus", "coloumNameCn": "维保状态","tag":true},
          {"columnName": "attr", "coloumNameCn": "属性"},
          {"columnName": "deptName", "coloumNameCn": "使用部门"}];
        self.option.showOperate = true;
      },
      addDevice() {
        this.editData = {
          id: "",
          assetCode: "",
          deviceCode: "",
          name: "",
          type: "",
          deviceCount: "1",
          producer: "",
          price: "",
          userDate: "",
          attr: "",
          dept: "",
          repairMan: "",
          phone: "",
          deptLevel: "",
          deviceStatus: ""
        };
        this.type = "add";
      },
      editDeviceDetail(row) {
        this.editData = Object.assign({}, row);
        this.type = "edit";
      },
      getDeviceList() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/manage/queryByDeviceList",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if(resp.success) {
            self.handleDefaultTab();
            self.tableLoading = false;
            self.tableData = resp.result;
          }
        });
      },
      bfDevice(rowData) {
        this.rowData = {
          deviceName: rowData.name,
          relateId: rowData.id,
          bfReason: "",
          type: "1",
          filePath: ""
        };
      },
      deleteDeviceDetail(rowData) {
        let self = this;
        let param = {
          id: rowData.id,
          status: '-1'
        };
        self.$confirm('确定删除该设备？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/manage/updateDeviceStatus",
            method: "post",
            params: param,
          }).then(resp => {
            if(resp.success) {
              self.getDeviceList();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "删除失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style>
  .manage .el-form--inline .el-form-item {
    margin-right: 30px;
  }
  .manage .el-input__inner {
    font-size: 11px;
  }
  .manage .el-select__tags-text {
    font-size: 11px;
  }
  .manage .el-select__tags {
    max-width: none !important;
  }
  .manage .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .manage .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .search.el-button--medium {
    padding: 5px 9px !important;
    background: #34bfc6;
    border-color: #34bfc6;
  }
  .add .el-button--medium {
    padding: 15px 30px !important;
  }
  .manage .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
</style>